<script>
	import { onMount } from 'svelte';
	import anime from 'animejs';

	let toggle = false;

	const MOON_PATH =
		'M34.5 60C34.5 93.1371 60 120 60 120C26.8629 120 0 93.1371 0 60C0 26.8629 26.8629 0 60 0C60 0 34.5 26.8629 34.5 60Z';
	const SUN_PATH =
		'M120 60C120 93.1371 93.1371 120 60 120C26.8629 120 0 93.1371 0 60C0 26.8629 26.8629 0 60 0C93.1371 0 120 26.8629 120 60Z';

	const MOON_COLOR = '#BFB7B6';
	const SUN_COLOR = '#dcf763';

	onMount(() => {
		const darkMode = document.querySelector('#darkMode');

		darkMode.addEventListener('click', () => {
			const timeline = anime.timeline({
				duration: 400,
				easing: 'linear'
			});
			timeline
				.add({
					targets: '.sun',
					d: [
						{
							value: !toggle ? MOON_PATH : SUN_PATH
						}
					],
					fill: !toggle ? MOON_COLOR : SUN_COLOR
				})
				.add(
					{
						targets: '#darkMode',
						rotate: !toggle ? 340 : 0
					},
					'-= 400'
				)
				.add(
					{
						targets: '.main',
						backgroundColor: !toggle ? '#121212' : '#fff',
						color: !toggle ? '#eee' : '#080705'
					},
					'-= 400'
				);
			toggle = !toggle;
		});
	});
</script>

<div class="main">
	<svg width="120" height="120" viewBox="0 0 120 120" id="darkMode">
		<path class="sun" d={SUN_PATH} fill={SUN_COLOR} />
	</svg>
	<p>It's {!toggle ? 'day' : 'night'}!</p>
</div>

<style>
	.main {
		height: 100vh;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background: #fff;
	}
	svg {
		height: 20vh;
		cursor: pointer;
	}
	p {
		font-size: calc(8px + 0.625vw);
	}
	@media screen and (max-height: 667px) {
		p,
		a {
			font-size: 22px;
			margin-block-start: 0.2vh;
			margin-block-end: 0.2vh;
		}
	}
</style>
